<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .alert {
            color: red;
            border: 1px solid rebeccapurple;
        }
    </style>
</head>

<body>

    <input type="password" name="" id="">
    <button>切换</button>
    <div>
        密文
    </div>
    <input type="checkbox" name="" id="ck">
    <script>
        /* 
        
         4-  修改dom属性
                ipt.value
                dom.innerHTML
                dom.innerText
                dom.style

                ipt.type
                ipt.className  获取类
                ipt.className ='aa'  覆盖的原来
                ipt.classList.add('a') 添加类
                ipt.classList.remove('a')删除类
                ipt.classList.replace('')替换类
                ipt.classList.toggle()切换类
                ipt.classList.contains()判断是否包含类


                ipt.checked ->true（勾选） false（没有勾选）
                ipt.checked = true;  主动勾选 


             ***所有我们之前学的htm标签的属性 都可以在dom对象里面的使用
             dom.属性名  获取属性
             dom.属性名=属性值  设置属性
               可以获取这个属性，也可以设置
               ipt.type = 'text'
        
        */
        //    点击的时候，将 ipt的 type属性 改变--password --text
        var btn = document.querySelector('button');
        //点击事件点击的时候就会执行后面的函数
        btn.onclick = function () {
            var ipt = document.querySelector("input");
            var div = document.querySelector('div');
            console.log(ipt.type);
            if (ipt.type == 'password') {
                ipt.type = 'text'
                div.innerHTML = '明文'
                // 设置类名属性
                div.className = 'alert'

            } else {
                // 设置type属性
                ipt.type = 'password'
                div.innerHTML = '密文';
                // 类名设置空字符串
                div.className = ''





            }
        }




        // classList 类名的 添加 删除 替换
        btn.classList.add('a')
        // 添加一个类名
        btn.classList.add('b')
        // 删除一个类名
        btn.classList.remove('a')

        // 把 b 替换为 bb
        btn.classList.replace('b', 'bb')

        // 切换类-如果有就删除，如果没有添加
        btn.classList.toggle('alert')
        // btn.classList.toggle('alert')

        // 判断是否包含一个类-有返回true,没有返回false

        console.log(btn.classList.contains('alert'));



        var ckIpt = document.querySelector('#ck');

        // 获取勾选状态
        console.log(ckIpt.checked)//false 
        // 设置勾选状态
        ckIpt.checked = true;


    </script>



</body>

</html>